import { useState } from 'react'
import { Outlet } from 'react-router-dom'
import { Layout, Button } from 'antd'
import LayoutMenuIcon from './LayoutMenuIcon'
import LayoutMenu from './LayoutMenu'
import LayoutNavbar from './LayoutNavbar'
import logo from '../../assets/react.svg'
import './style.less'
import LayoutToolbar from './LayoutToolbar'

// 基本布局
const { Header, Content, Sider } = Layout

function LayoutMain () {
  const [collapsed, setCollapsed] = useState(false)
  const [permissionsLoaded, setPermissionsLoaded] = useState(false)

  return (
    <Layout className="layout-container">
      {/* 头部 */}
      <Header className="layout-header">
        {/* logo */}
        <div className="layout-header-logo" style={{ width: collapsed ? 80 : 200 }}>
          <img src={logo} alt="logo" />
          <h1 style={{ width: collapsed ? 0 : 'auto' }}>Admin模板</h1>
        </div>
        {/* 折叠菜单按钮 */}
        <div className="layout-header-collapsed">
          <Button
            type="link"
            icon={ !collapsed ? <LayoutMenuIcon icon="MenuFoldOutlined" /> : <LayoutMenuIcon icon="MenuUnfoldOutlined" /> }
            onClick={() => setCollapsed(!collapsed)}
          ></Button>
        </div>
        {/* 导航栏 */}
        <div className="layout-header-navbar">
          <LayoutNavbar/>
        </div>
        {/* 工具栏 */}
        <div className="layout-header-toolbar">
          <LayoutToolbar />
        </div>
      </Header>
      {/* 主体 */}
      <Layout>
        {/* 菜单列表 */}
        <Sider collapsed={collapsed}>
          <LayoutMenu onLoaded={loaded => setPermissionsLoaded(loaded)} />
        </Sider>
        {/* 主视图区 */}
        <Layout className="layout-main">
          <Content className="layout-main-content">
            {permissionsLoaded && <Outlet></Outlet>}
          </Content>
        </Layout>
      </Layout>
    </Layout>
  )
}

export default LayoutMain
